<template>
  <div>
    <!-- 1. 声明式导航 -->
      <div class="wrap">
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-link to="/article?desc=美食&city=淄博">文章</router-link>
        <router-link to="/list">列表</router-link>
      </div>

      <!-- 2.配置路由出口，挖个坑，组件会在这个位置显示 -->
      <div class="main">
          <router-view></router-view>
      </div>

  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.wrap{
  display: flex;
  width: 400px;
  margin:20px auto;
}
.wrap a{
  flex: 1;
  text-align: center;
}
.main{
  height: 600px;
  border: 1px solid red;
}
/* router-link=active 模糊匹配 to="/my"   /my  /my/one */
/* exact ==> 精确匹配  to="/find" */
.router-link-active{
  background-color: skyblue !important;
  color:#fff !important;
}
</style>